<!DOCTYPE html>
<html>
<head>
    <title>Ceadeal 后台管理系统</title>
    <#include "../common/head.ftl"/>
    <link href="/plugin/cropper/cropper.min.css" rel="stylesheet">
    <link href="/js/sitelogo/sitelogo.css" rel="stylesheet">
</head>
<body class="cw-body">
<div id="page-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            用户管理
            <small>&nbsp;</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/main"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active">用户管理</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Your Page Content Here -->
        <ul class="nav nav-tabs">
            <li role="presentation"><a href="/user/list">列表</a></li>
            <#if user.id??>
                <li role="presentation"><a href="/user/edit">新增</a></li>
                <li role="presentation" class="active"><a href="#">编辑</a></li>
                <#else>
                <li role="presentation" class="active"><a href="#">新增</a></li>
            </#if>
            <!-- /... -->
        </ul>

        <form id="form1" name="form1" method="post">
        <input type="hidden" name="id" value="${(user.id)!}" />
        <input type="hidden" id="avatarHidden" name="avatar" value="${user.avatar!''}">
        <div class="row">
            <div class="col-md-6">
                <!-- box 1 -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title"><i class="fa fa-info-circle"></i>&nbsp;基本信息</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        </div>
                    </div>
                    <div class="box-body">
                        <table id="infoTable" class="table table-bordered table-striped table-info">
                            <tr>
                                <td style="width:25%;"><span class="red">*</span>&nbsp;用户名：</td>
                                <td><input type="text" name="userName" class="form-control" value="${(user.userName)!}" maxlength="24" autocomplete="off" <#if user.id??>disabled="disabled"</#if> /></td>
                            </tr>
                            <tr>
                                <td><#if !user.id??><span class="red">*</span></#if>&nbsp;密码：</td>
                                <td><input type="password" name="password" class="form-control" value="" maxlength="24" autocomplete="off" /></td>
                            </tr>
                            <tr>
                                <td><span class="red">*</span>&nbsp;昵称：</td>
                                <td><input type="text" name="nickName" class="form-control" value="${(user.nickName)!}" maxlength="10" /></td>
                            </tr>
                            <tr>
                                <td>手机号：</td>
                                <td><input type="text" name="mobile" class="form-control" value="${(user.mobile)!}" maxlength="11" /></td>
                            </tr>
                            <tr>
                                <td>邮箱：</td>
                                <td><input type="text" name="email" class="form-control" value="${(user.email)!}" maxlength="24" /></td>
                            </tr>
                            <tr>
                                <td>等级：</td>
                                <td><input type="text" name="level" class="form-control" value="${(user.level)!}" maxlength="2" placeholder="0 ~ 99" /></td>
                            </tr>
                        </table>
                    </div>
                    <div class="box-footer with-border">
                        <button type="button" id="btn_ok" class="btn btn-success btn-control"><i class="fa fa-check"></i>&nbsp;提&nbsp;交</button>&emsp;
                        <button type="button" id="btn_back" class="btn btn-default btn-control"><i class="fa fa-arrow-left"></i>&nbsp;返&nbsp;回</button>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <!-- box 2 -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title"><i class="fa fa-picture-o"></i>&nbsp;头像</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="ibox-content">
                            <div class="row">
                                <div id="crop-avatar" class="col-md-6">
                                    <div class="avatar-view" title="选择图片" style="border-radius: 50%;">
                                        <img id="img-avatar" src="${user.avatar!''}" alt="头像">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </form>
        <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <form class="avatar-form" action="/file/upload" enctype="multipart/form-data" method="post">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal" type="button">&times;</button>
                            <h4 class="modal-title" id="avatar-modal-label">选择图片</h4>
                        </div>
                        <div class="modal-body">
                            <div class="avatar-body">
                                <div class="avatar-upload">
                                    <input class="avatar-src" name="avatar_src" type="hidden">
                                    <input class="avatar-data" name="avatar_data" type="hidden">
                                    <label for="avatarInput">图片上传</label>
                                    <input class="avatar-input" id="avatarInput" name="file" type="file"></div>
                                <div class="row">
                                    <div class="col-md-9">
                                        <div class="avatar-wrapper"></div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="avatar-preview preview-lg"></div>
                                        <div class="avatar-preview preview-md"></div>
                                        <div class="avatar-preview preview-sm"></div>
                                    </div>
                                </div>
                                <div class="row avatar-btns">
                                    <div class="col-md-9">
                                        <div class="btn-group">
                                            <button class="btn" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"><i class="fa fa-undo"></i> 向左旋转</button>
                                        </div>
                                        <div class="btn-group">
                                            <button class="btn" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"><i class="fa fa-repeat"></i> 向右旋转</button>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <button class="btn btn-success btn-block avatar-save" type="submit"><i class="fa fa-save"></i> 保存修改</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="loading-wrapper">
            <div id="cdl-loading"><div></div></div>
            <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
        </div>

    </section>
    <!-- /.content -->
</div>

<!-- REQUIRED JS SCRIPTS -->
<#include "../common/script-common.ftl"/>
<!-- jQuery validate -->
<script src="/plugin/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/plugin/jquery-validation/dist/localization/messages_zh.js"></script>
<script src="/js/cdl-validate.js"></script>
<script src="/plugin/cropper/cropper.min.js"></script>
<script src="/js/sitelogo/sitelogo.js"></script>
<script>
    $(function(){
        var _form = $("#form1");
        if ($("[name='id']").val() == "") {
            $("[name='userName'],[name='password']").val("");
        }

        $("#btn_ok").click(function(){
            if(!_form.valid()){
                return;
            }
            bootboxConfirm("确认要提交信息吗？", function(result){
                if (result) {
                    $("#avatarHidden").val($("#img-avatar").attr("src"));
                    _form.attr("action", "/user/save");
                    _form.submit();
                }
            });
        });
        $("#btn_back").click(function(){
            location.href = "/user/list";
        });

        _form.validate({
            rules: {
                'userName': {required: true, minlength:2, remote: "/user/checkUserName"},
                <#if user.id??>
                    'password': {required: false, minlength:6},
                <#else>
                    'password': {required: true, minlength:6},
                </#if>
                'nickName': {required: true, minlength:2},
                'mobile': {required: false, isMobile: true},
                'email': {required: false, email: true},
                'level': {required: false, number: true, min: 0, max: 99}
            },
            messages: {
                'userName': { remote: "用户名已存在"}
            }
        });
    });
</script>
</body>
</html>